<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <Return txt="设置新密码"></Return>
    <div class="list" style="margin-top: 50px">
      <div class="listName">手机号</div>
      <input type="text" v-model="name" placeholder="+86 15100000000" />
      <div style="width: 30px"></div>
    </div>
    <div class="list">
      <div class="listName">验证码</div>
      <input type="text" v-model="cardNum" placeholder="请输入验证码" />
      <div class="huqu" @click="getValidate()">{{ rg_code }}</div>
    </div>
    <div class="list">
      <div class="listName">密码</div>
      <input type="text" v-model="password" placeholder="请设置新密码" />
    </div>
    <div class="list">
      <div class="listName">密码</div>
      <input type="text" v-model="password1" placeholder="请再次输入新密码" />
    </div>
    <div class="listone">
      <div class="listName"></div>
      <div class="txt" style="color:">密码要求6—16位数，至少包含数字、字母、符号两种元素</div>
    </div>
    <van-button class="button" size="large" type="default">确认</van-button>
  </div>
</template>
<script>
import Return from "../../components/return";
export default {
  components: {
    Return,
  },
  data() {
    return {
      name: "",
      cardNum: "",
      countDown: 60,
      password: "",
      password1: "",
      rg_code: "获取验证码", //获取短信
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
    };
  },
  methods: {
    setTimeDown() {
      if (this.countDown === 0) {
        this.validateDisabled = false;
        this.rg_code = "重新获取";
        this.countDown = 60;
        return;
      } else {
        this.validateDisabled = true;
        this.rg_code = this.countDown + "s";
        this.countDown--;
        setTimeout(this.setTimeDown, 1000);
      }
    },
    getValidate() {
      this.setTimeDown();
    },
  },
};
</script>
<style scoped>
.all {
  background: #4ac7d7;
}
input {
  border: none;
  background: none;
  color: white;
  font-size: 15px;
}
input::-webkit-input-placeholder {
  color: #fff;
}
.list {
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #cfcfcf;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.listone {
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.list input {
  border: none;
}
.listName {
  width: 25%;
  font-size: 18px;
  color: white;
}
.list input {
  width: 50%;
}
.huqu {
  width: 25%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #16A5B6;
  color: #fff;
  background: #16A5B6;
  border-radius: 10px;
}
.txt {
  width: 75%;
  font-size: 15px;
}
.button {
  margin-top: 20px;
  width: 90%;
  margin-left: 5%;
}
</style>